<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#id1 {
				width:100px;
				height: 100px;
				background-color: #FF0000;
			}
			#id2{
				width:100px;
				height:100px;
				background-color: aqua;
			}
			#id3{
				width: 300px;
				height: 300px;
				background-color: chocolate;
			}
			#id4{
				width:50px;
				height: 50px;
				background-color: chartreuse;
			}
		</style>
	</head>
	<body>
		<button type="button" id="btn1" onclick="btnClick()">按钮</button>
		<button type="button" id="btn2" >按钮2</button>
		<button type="button" id="btn3">按钮3</button>
		<button type="button"id="btn4">按钮4</button>
		<button type="button" id="btnadd" onclick="addlist()" >为按钮4添加监听器</button>
		<button type="button" id="btnRemove" onclick="moverlist()" >为按钮4清除监听器</button>
		
		<div id="id1" onclick="divClick()"></div>
		<div id="id2"></div>
		<div id="id3" onmouseenter="enterdiv()" onmouseleave="leavediv()" onmousemove="movediv()"></div>
		姓名：<input type="text" name="" id="username" value="" onfocus="fous()" onblur="dif()"/><br/>
		密码：<input type="password" name="" id="PWS" value="" /><br/>
		<button type="button" onclick="acc()" >提交</button>
		
		<div id="id4"></div>
		<button type="button" id="add" onclick="add1()">为div添加监听器</button>
		<button type="button"id="remove" onclick="remove1()">为div清除监听器</button>
	</body>
	<script type="text/javascript">
	//第四题
	
			
			function add2(){
				console.log('我在动')
			}
			function add1(){
			document.getElementById('id4').addEventListener('mousemove',add2)}
			function remove1(){
			document.getElementById('id4').removeEventListener('mousemove',add2)}
	
	
	
	//第四题
	
	//第三题
		function fous (){
			console.log("用户在输入名称")
		}
		function dif(){
			if(document.getElementById('username').value.length<1){
				alert('没有输入用户名')
			}
		}
		function fous1(){
			console.log('用户正在输入密码')
			
		}
		function dif1(){
			if(document.getElementById('PWS').value.length<1){
				alert('没有输入密码')
			}
		}
		function acc(){
			if(document.getElementById('username').value.length<1 && document.getElementById('PWS').value.length<1){
				alert('用户名和密码为空')
			}
			else if (document.getElementById('PWS').value.length<1){
				alert('密码为空')
			}
			else if(document.getElementById('username').value.length<1){
				alert('用户名为空')
			}
		}
		//第三题
	//按钮
		function btnClick (){
			console.log('点击领取屁吃')
		}
		document.getElementById('btn2').onclick=btnClick;
		
		document.getElementById('btn3').ondblclick=function(){
			console.log('双击我给按钮3屁吃')
		}
		function btnClick4(){
			console.log('按钮被点击')
			
		}
		
		
		function addlist (){
			document.getElementById('btn4').addEventListener('click',btnClick4)
			// document.getElementById('btn4').addEventListener('click',function(){
			// 	console.log('按钮4被点击了')})
		}
		function moverlist(){
			document.getElementById('btn4').removeEventListener('click',btnClick4)
		}
		
		function divClick(){
			console.log('死了');
		}
		document.getElementById('id2').onclick=divClick;
		// document.getElementById('id2').onclick=function(){
		// 	console.log('单机成功')
		// }
		
		function enterdiv (){
			console.log('进来了')
			document.getElementById('id3').style.background='blue'
		}
		function leavediv(){
			console.log('我走了')
			document.getElementById('id3').style.background='red'
		}
		
		function movediv (){
			console.log('我在动')
		}
		function color(){
			document.getElementById('id1').style.background='blue'
		}
		document.getElementById('id1').onmouseenter=color
		function color2(){
			document.getElementById('id1').style.background='red'
		}
		document.getElementById('id1').onmouseleave=color2
		
		document.getElementById('id1').onmousemove=function(){
			console.log('动动')
		}
		function color3(){
			document.getElementById('id2').style.background='blue'
		}
		function color4(){
			document.getElementById('id2').style.background='red'
		}
		function movediv2(){
			console.log('我不在动')
		}
		document.getElementById('id2').addEventListener('mouseenter',color3)
		document.getElementById('id2').addEventListener('mouseleave',color4)
		document.getElementById('id2').addEventListener('mousemove',movediv2)
		
	</script>
</html>
